<template>
	<view class="box">
		<view class="head_tlt">
			<view class="tlt_blank"><text>{{wxLogin?'欢迎登录':'授权登录'}}</text></view>
			<view class="tlt_gray"><text>分享不间断，收益无极限</text></view>
		</view>
		<!-- 授权登陆 -->
		<view class="authorization_box" v-if="!wxLogin">
			<view style="height: 60rpx;"></view>
			<view class="col my-pdt-15 my-mgl-15 my-font-16">
				1.请先微信授权登录
			</view>
			<view class="col my-mgt-25 my-mgl-15 my-font-16">
				2.输入账号密码再登录
			</view>
			<view class="txt my-pdl-15 my-mgt-20">注：1.微信账户可绑定多个账户，后面登录为上一次登录的账号</view>
			<view class="txt mg_left my-mgt-15"> 2.本小程序仅供商联支付小程序运营商范围使用，需登录</view>
			<view class="withdraw_btn">
				<button type="default" class="btn" @click="authorizedLog">授权登录</button>
			</view>
		</view>
		<!-- 登录 -->
		<view class="login_box" v-else>
			<view class="inp">
				<input class="name my-pdl-15" placeholder-class="col my-cl-grey my-font-14" type="text"
					placeholder="请输入手机号" v-model="phone" />
				<input class="pass my-mgt-15 my-pdl-15" placeholder-class="col my-cl-grey my-font-14" type="password"
					placeholder="请输入登录密码" v-model="password" />
			</view>
			<view class="login-btn">
				<button class="btn" type="default" @click="loginBtn">登录</button>
			</view>
			<view class="slip">
				<view class="left" @click="slipPassword"><text>忘记密码</text></view>
				<view class="right" @click="goRegister">现在注册</view>
			</view>
			<view class="radio-btn my-flex-col-c">
				<view class="my-flex-row-align-c">
					<radio class="tr" color="#F05329" @click="changeRadio" style="transform: scale(0.7);"
						:checked="checked" />
					<div @click="showAgree()"><text class="my-cl-ye my-mgl-8 my-font-15">我已阅读并同意<text
								class="my-cl-or">《用户协议》</text></text></div>
				</view>
			</view>
		</view>

		<u-modal v-model="modal" :title="title" :content="confirmContent" @confirm="confirm"></u-modal>

		<!-- <Modal
		    class="agreementModal"
		    visible="false"
		>
		    <div class="userAgreement">
		        <div class="contentBox">
		            <div class="title">商联支付用户协议</div>
		            <div class="first">
		                <p class="about">关于商联支付</p>
		                <div>
		                    本平台为会员权益平台,合作机构包括工商银行、农业银行、建设银行、招商银行等，在广东省内拥有超过9家分公司。
		                    经过十几年的发展，商联支付已拥有成熟的技术团队，成型的业务模式，完备的认证机制。
		                </div>
		              
		                <p  class="about">温馨提示</p>
		                <div>
		                    1、个人账号和密码请妥善保护，避免丢失，造成资金损失；<br/>
		                </div>
		                <p  class="about">关于实名的说明</p>
		                <div>
		                    1、根据国家法律法规规定,提现等业务必须实名认证<br/>
		                    2、使用虚假身份信息发现后冻结/停用账户并报送公安机关。
		                </div>
		               
		                <p  class="about">隐私保护</p>
		                <div>
		                    您使用平台服务前，需要在平台创建账号并完善个人资料。平台确保客户信息不外漏。<br/>
		                </div>
		            </div>
		        </div>
		    </div>
		</Modal> -->
	</view>
</template>

<script>
	import {
		loginApi,
		authorizedlogApi
	} from "@/api/uesr.js"
	import {
		identity
	} from "@/common/verifyLogin.js"
	import req from "@/utils/req.js"
	export default {
		data() {
			return {
				confirmContent: '本平台为会员权益平台,合作机构包括工商银行、农业银行、建设银行、招商银行等，在广东省内拥有超过9家分公司。经过十几年的发展，商联支付已拥有成熟的技术团队，成型的业务模式，完备的认证机制.  个人账号和密码请妥善保护，避免丢失，造成资金损失;根据国家法律法规规定,提现等业务必须实名认证;使用虚假身份信息发现后冻结/停用账户并报送公安机关;您使用平台服务前，需要在平台创建账号并完善个人资料。平台确保客户信息不外漏。',
				title: "商联支付用户协议",
				modal: false,
				phone: '',
				password: '',
				checked: true,
				wxLogin: uni.getStorageSync("wxLogin") || false,
			};
		},
		onLoad() {
			if (identity()) {
				uni.switchTab({
					url: "/pages/main/homePages",
				})
			}
		},

		methods: {
	
			confirm() {
				this.modal = false

			},
			authorizedLog() {
				wx.login({
					success: (res) => {
						// console.log(8888,res)
						var code = res.code;
						this.authlogin(code)
					}
				})
			},
			getUserInfo() {
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						console.log(0)
						console.log(res)
						//如果用户点击了确定按钮
						if (res.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								success: res => {
									console.log(res.userInfo.nickName);
									console.log(res.userInfo.avatarUrl);
									uni.setStorageSync("nickName",res.userInfo.nickName)
									uni.setStorageSync("avatarUrl",res.userInfo.avatarUrl)
									console.log(1);
								},
								fail: res => {
									// console.log(2);
									// console.log(res)
									//拒绝授权
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							// console.log(3);
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				});
			},

			authlogin(code) {
				let _this = this
				let params = {
					jsCode: code
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				let sessionKey = uni.getStorageSync('sessionKey')
				uni.request({
					url: 'https://mlpay.aoe1.top' + '/user/wechat/jscode2session',//线上地址
					// url: 'https://yt9.natapp4.cc' + '/user/wechat/jscode2session',//本地地址
					method: 'POST',
					data: params,
					header: {
						'content-type': 'application/json;charset=UTF-8',
						'X-HXCharge-Authentication': '' + sessionKey
					},
					success: function(res) {
						if (res.statusCode == 200) {
							uni.hideLoading()
							_this.wxLogin = true;
							_this.getUserInfo();
							uni.showToast({
								title: "授权成功",
								icon: "success",
								success() {
									uni.setStorageSync("wxLogin", true);
									uni.setStorageSync('openId', res.data.data.openId);
									uni.setStorageSync('sessionKey', res.data.data.sessionKey);
								}
							})
						}

					}
				})
			},
			// radio切换
			changeRadio() {
				this.checked = !this.checked
			},

			showAgree() {
				this.modal = true;
			},
			// 忘记密码
			slipPassword() {
				uni.navigateTo({
					url: "/pages/register/slipPass",
				})
			},
			// 现在注册
			goRegister() {
				uni.navigateTo({
					url: "/pages/register/register",
				})
			},
			// 登入
			async loginBtn() {
				if (this.phone === '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				if (this.password === '') {
					uni.showToast({
						title: "请输入登录密码",
						icon: "none"
					})
					return
				}
				if (this.checked === false) {
					uni.showToast({
						title: "请勾选用户协议",
						icon: "none"
					})
					return
				}
				if (this.phone !== '' && this.password !== '' && this.checked) {
					try {
						let params = {
							appType: "APPLET",
							phone: this.phone,
							password: this.password,
							openId: uni.getStorageSync("openId")
						}
						uni.showLoading({
							title: "正在加载中...."
						})
						const res = await loginApi(params)
						console.log("登录返回信息:"+JSON.stringify(res))
						// console.log(99999988,res);
						if (res.statusCode === 200) {
							uni.hideLoading()
							uni.setStorageSync('role', res.data.data.role)
							uni.setStorageSync('member_id', res.data.data.id)
							uni.setStorageSync('isLogin', res.data.data.logged)
							uni.setStorageSync('sessionKey', res.data.data.sessionKey)
							uni.switchTab({
								url: "/pages/main/homePages",
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}
					} catch (e) {
						console.log(e, 999999);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FFFFFF;

		.head_tlt {
			width: 100%;
			height: 350rpx;
			line-height: 270rpx;
			padding-left: 55rpx;

			.tlt_blank,
			.tlt_gray {
				width: 100%;
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.tlt_blank {
				font-size: 48rpx;
				font-weight: 500;
				color: #000000;
			}

			.tlt_gray {
				font-size: 30rpx;
				color: #CCCCCC;
			}
		}

		.login_box {
			width: 100%;
			height: 985rpx;
			background: #FFFFFF;
			box-shadow: -1rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.inp {
				width: 100%;
				height: 350rpx;
				padding: 69rpx 75rpx 0rpx 75rpx;
				box-sizing: border-box;

				.name,
				.pass {
					width: 95%;
					height: 80rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 10rpx;
				}

				.col {
					font-size: 28rpx;
					font-weight: 500;
					color: #B3B3B3;
				}
			}

			.login-btn {
				width: 100%;
				height: 88rpx;

				.btn {
					width: 80%;
					height: 100%;
					text-align: center;
					line-height: 88rpx;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					color: #FFFFFF;
				}
			}

			.slip {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.left,
				.right {
					width: 150rpx;
					height: 31rpx;
					line-height: 31rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #CCCCCC;
				}

				.right {
					text-align: right;
					border-left: 1rpx solid #CCCCCC;
				}
			}

			.radio-btn {
				width: 100%;
				height: 80rpx;
				position: absolute;
				left: 15rpx;
				bottom: 40rpx;
			}
		}

		.authorization_box {
			width: 100%;
			height: 704rpx;
			background: #FFFFFF;
			box-shadow: -1rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.col {
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}

			.txt {
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #B3B3B3;
			}

			.mg_left {
				margin-left: 77rpx;
			}

			.withdraw_btn {
				width: 100%;
				height: 200rpx;
				margin-top: 200rpx;

				.btn {
					width: 690rpx;
					height: 88rpx;
					margin: auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					line-height: 88rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	.agreementModal {
		height: 100%;

		.userAgreement {
			.navBar {
				position: fixed;
				width: 100%;
				z-index: 999;
			}

			.contentBox {
				padding-top: 96/75rem;
			}
		}

	}

	.title {
		font-weight: bold;
		font-size: 36/75rem;
		color: #2A2A32;
		text-align: center;
		padding: 55/75rem 0 35/75rem 0;
	}

	.about {
		font-weight: bold;
		font-size: 32/75rem;
		color: #50585D;
		padding-bottom: 20/75rem;
	}
</style>
